<!--实现全国地图下钻，由于涉及JSON文件较多，所以就直接引用在线JSON https://geo.datav.aliyun.com/areas_v3/bound/-->
<template>
  <div class="map">
    <!--  v-if="this.layer === 3" -->
        <div class="btnWrapper">
         <!-- 酒店按钮 -->
          <div v-on:click="hotelDialogFormVisible = true">
            <img src="../../../assets/img/home/酒店.png"/>
          </div>
        </div>
      
        <el-dialog title='在当前景点预订酒店' :visible.sync="hotelDialogFormVisible" width="300px">
          <el-form :model="hotelForm">
            <el-form-item label="酒店星级:" >
              <el-select v-model="selectedLevel" @change="handleStarsChange" clearable placeholder="请选择">
                <el-option
                  v-for="item in starsOpts"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选择酒店:">
              <el-select v-model="hotel.id" @change="handleSelectChange" clearable placeholder="请选择">
                <el-option
                  v-for="item in filteredHotels"
                  :key="item.id"
                  :label="item.name + ' ' + item.price + '元'"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="collectHotelInf">确 定</el-button>
          </div>
        </el-dialog>
	</div>
</template>

<script>
export default {
  name: 'HotelSelect',
  computed: {
    filteredHotels() {
     // 根据选择的酒店星级过滤酒店名字选项
      return this.selectedLevel ? this.hotels.filter(hotel => hotel.level === this.selectedLevel) : this.hotels;
    }
  },
  data () {
    return {
      // formLabelWidth: '100px',
      // 表单弹窗
      hotelDialogFormVisible: false,
      // 用户选中的酒店信息
      hotel:{},
      selectedLevel: '',//被选中的酒店星级
      starsOpts:[
        {label:'三星级',value:3},
        {label:'四星级',value:4},
        {label:'五星级',value:5},
      ],
      hotels: [
        // 3-star hotels
          { name: "绿野仙踪酒店", level: 3, price: 350, id: 1 },
          { name: "海边乐园酒店", level: 3, price: 300, id: 2 },
          { name: "都市快捷酒店", level: 3, price: 280, id: 3 },
          { name: "古镇风情酒店", level: 3, price: 320, id: 4 }
        ,
        // 4-star hotels
          { name: "蓝天贵宾酒店", level: 4, price: 500, id: 5 },
          { name: "星河湾酒店", level: 4, price: 550, id: 6 },
          { name: "金色年华酒店", level: 4, price: 480, id: 7 },
          { name: "梦幻城堡酒店", level: 4, price: 520, id: 8 }
        ,
        // 5-star hotels
          { name: "天际线豪华酒店", level: 5, price: 800, id: 9 },
          { name: "皇家园林酒店", level: 5, price: 850, id: 10 },
          { name: "白金汉宫酒店", level: 5, price: 900, id: 11 },
          { name: "世界之窗酒店", level: 5, price: 950, id: 12 }
        
      ],
      hotelForm: {
        hotelName: '',
        hotelPrice: '',
      },
    }
  },
  methods: {
    handleSelectChange(value){
      this.hotel = this.filteredHotels.find(item => item.id === value);
      console.log(this.hotel);
    },
    handleStarsChange(value){
      if(!!value) this.hotel = {}
      this.selectedLevel = value
    },
    // 收集酒店信息
    collectHotelInf(){
      this.hotelForm.hotelName = this.hotel.name
      this.hotelForm.hotelPrice = this.hotel.price
      this.$store.commit('saveScenicArray',this.hotelForm)
      this.hotel = {}
      this.hotelDialogFormVisible = false
    },
  }
}
</script>

<style scoped>
  img{
    height: 30px;
    width: 30px;
  }
</style>
